<template>
	<view class="content">
		<view class="content-top">
			<view class="top-title">求职意向</view>
			<view class="top-title-two">
				<view class="title-characters">“码上就业” 小程序上线啦！</view>
			</view>
			<view class="characters-script">
				<view class="characters">
					<text decode="true">
						求职意向就是根据个人的爱好和能力，对自己进行职业规划，明确自己所要从事的职业，从而有针对性的去寻找合适的工作。明确求职意向，是个人找工作的第一步。
					</text>
					<view style="text-indent:2em;">
						想要找工作，就快来填写求职意向吧，让小程序自动为您快速匹配岗位!
					</view>
				</view>
			</view>


		</view>
		<view class="content-bottom">
			<view class="content-form">
				<view class="form-characters">
					<view class="item-title FangZhengHanZhenGuangBiaoJianTi">求职意向填写</view>
					<view class="form-item">
						<view class="form-label">期望职位</view>
						<view class="form-content">
							<input v-model="form.postNames" maxlength="30" type="text" placeholder="请选择期望职位"
								placeholder-class="inputPlaceholder" disabled="true" @click="chooseJobCategory"
								class="form-ctrl" />
							<view class="iconfont icon-gengduo1 arrow"></view>
						</view>
					</view>

					<!-- 					<view class="form-item">
						<view class="form-label">期望地点</view>
						<view class="form-content">
							<view class="form-ctrl">
								<uni-data-picker @change="bindRegion" v-model="form.regArea" :localdata="region"
									parent-field="children">
								</uni-data-picker>
							</view>
						</view>
					</view> -->
					<view class="form-item">
						<view class="form-label">期望薪资</view>
						<view class="form-content">
							<picker class="form-ctrl" mode="multiSelector" :value="salaryIndexArr" :range="salary"
								@columnchange="salaryColChange" @change="salaryChange">
								{{form.salaryMin}}-{{form.salaryMax}}元
							</picker>
							<view class="iconfont icon-gengduo1 arrow"></view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-label">职位分类</view>
						<view class="form-content">
							<picker class="form-ctrl" :range="type" range-key="value" :value="form.recruitType-1"
								@change="bindType">
								{{type[form.recruitType-1]['value']}}
							</picker>
							<view class="iconfont icon-gengduo1 arrow"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 160rpx;">
			<view class="btn" @click="handleSave">提交</view>
		</view>

	</view>
</template>

<script>
	import {
		getSalaryData
	} from '@/util/util.js'
	import {
		submitIntention,
		getIntention
	} from '@/api/resume.js'
	import {
		validate
	} from '@/util/validate.js'
	export default {
		data() {
			return {
				id: null,
				form: {
					id: 0,
					salaryMin: 3000,
					salaryMax: 4000,
					post: null,
					// regArea: null,
					recruitType: 1,
					industryType: 1,
					postNames: ''
				},
				industry: [],
				rules: {
					post: {
						name: '期望职位',
						required: true
					},
					// regArea: {
					// 	name: '期望地点',
					// 	required: true
					// }
				},
				//地点选择
				region: [],
				//薪资选择
				salary: [],
				salaryIndexArr: [0, 0],
				//全职兼职选择
				type: [{
					id: 1,
					value: '全职'
				}, {
					id: 2,
					value: '兼职'
				}],
				typeIndex: 0,
				regionArr: [],
			}
		},
		methods: {
			salaryChange(e) {
				this.form.salaryMin = this.salary[0][e.detail.value[0]]
				this.form.salaryMax = this.salary[1][e.detail.value[1]]
			},
			salaryColChange(e) {
				if (e.detail.column == 0) {
					this.getSalary(e.detail.value + 1)
				}
			},
			getSalary(select) {
				this.salary = getSalaryData(select);
			},
			bindType(e) {
				this.form.recruitType = e.detail.value * 1 + 1
			},
			bindIndustryType(e) {
				this.form.industryType = e.detail.value * 1 + 1
			},
			bindRegion(e) {
				this.regionArr = e.detail.value.map((item) => {
					return item.value
				})
			},
			chooseJobCategory() {
				uni.navigateTo({
					url: '/page_other/job_category/index?max=1'
				})
			},
			handleSave() {
				if (validate(this.form, this.rules)) {
					console.log(8888888888888)
					console.log(this.form.post, 55555555555)
					uni.navigateTo({
						url: '/page_other/job_hunting/job_list/index?jobType=' + this.form.post
					})
				}
			},
			getDetail(id) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getIntention({
					id
				}).then((res) => {
					let regionArr = res.regArea.split(',');
					res.regArea = regionArr[2]
					this.regionArr = regionArr;
					this.salaryIndexArr = [res.salaryMin / 1000 - 1, (res.salaryMax - res.salaryMin) / 1000 - 1]
					this.getSalary(res.salaryMin / 1000);
					this.form = res
				}).catch(() => {
					this.showToast('加载失败', () => {
						uni.navigateBack()
					})
				})
			}

		},
		onShow(e) {
			this.region = this.globalConfig.area
			uni.$on('getJobCategory', (e) => {
				this.form.post = e[0].id
				this.form.postNames = e[0].jobTitle;

			})
		},
		onLoad(e) {
			if (e.id) {
				this.getDetail(e.id)
			} else {
				this.getSalary(1);
			}
		}

	}
</script>

<style lang="scss">
	.content {
		background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dunhuang/fast_background2.png');
		background-repeat: round;

		.content-top {
			background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dunhuang/fast_background1.png');
			background-repeat: round;
			height: 100%;

			.top-title {
				color: #fff;
				display: flex;
				justify-content: center;
				text-align: center;
				padding-top: 110rpx;
			}

			.top-title-two {
				background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dunhuang/fast_title1.png');
				background-repeat: round;
				height: 300rpx;
				width: 90%;
				margin: 90rpx 40rpx 60rpx 40rpx;

				.title-characters {
					display: flex;
					justify-content: center;
					text-align: center;
					padding-top: 77rpx;
					color: #0277FD;
					font-size: 40rpx;

				}

			}

			.characters-script {
				background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/dunhuang/fast_content.png');
				background-repeat: round;
				height: 600rpx;
				width: 90%;
				margin: 60rpx 40rpx 60rpx 40rpx;

				.characters {
					padding: 180rpx 20rpx 40rpx 20rpx;
					font-size: 15px;
					text-indent: 2em;
					line-height: 2em;

				}
			}

		}

		.content-bottom {

			.content-form {
				background-color: #fff;
				width: 90%;
				margin: 60rpx 40rpx 60rpx 40rpx;
				border-radius: 12rpx;

				.form-characters {

					padding: 60rpx 35rpx 60rpx 35rpx;

					.item-title {
						color: #0277FD;
						font-size: 36rpx;
					}

					.form-item {
						display: flex;
						flex-direction: column;
						border-bottom: 1px solid #efefef;
						padding-top: 30rpx;

						.form-label {
							font-size: 28rpx;
							color: #999;
						}

						.form-content {
							display: flex;
							flex-direction: row;
							align-items: center;

							.form-ctrl {
								height: 100rpx;
								line-height: 100rpx;
								flex-grow: 1;
							}

							.arrow {
								flex-grow: 0;
								color: #999;
								font-size: 24rpx;
							}
						}

					}

				}

			}

		}

		.btn {
			width: 350rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FFB200;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			margin: 0 auto;
			margin-top: 30rpx;
		}

	}
</style>